<template>
	<!-- <view class="uni-container" :style="{'background-image': 'url('+imageURL+')', 'background-repeat': 'no-repeat', 'background-size': '100%'}"> -->
	<view class="uni-container" :style="{'background-color': '#CCCCFF', 'background-repeat': 'no-repeat', 'background-size': '100% 30%'}">

		<view class="home">
			<view class="calculator">
				<view class="location">
					<view class="" >
						
						<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
							<view class="location_map">
							</view>
							<view class="local-title">广州市</view>
						</view>
						
					</view>
				</view>
				<view class="title">
					个税计算器
				</view>
				<view class="content">
					<view class="switch display_flex" :class="{ unitYear: isSwitch }">
						<text class="switch_btn" @click="switchTime('m')">月</text>
						<text class="switch_btn" @click="switchTime('y')">年</text>
					</view>
					<view class="amount">
						<view class="othertypes">
							<text>{{unit}}工资（税前）</text>
						</view>
						<view class="display_flex">
							<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
								<view class="amount_coin">￥</view>
								<view class="amount_input">
									<input @input="amountInput" v-model="gz" class="amount_input" type="number" placeholder="0.0" />
								</view>
							</view>
						</view>
					</view>
					<view class="kouchu wxyj">
						<view class="noNumber" @click="handleHousingfund('sb')">
							个人社保（{{unit}}）
						</view>
						<view v-if="wages.shebao" class="display_flex">
							<text>￥</text>
							<text class="number">{{shebao}}</text>
						</view>
					</view>
					<view class="kouchu grgjj">
						<view class="noNumber" @click="handleHousingfund('gjj')">
							个人公积金（{{unit}}）
						</view>
						<view v-if="wages.gongjijin" class="display_flex">
							<text>￥</text>
							<text class="number">{{gongjijin}}</text>
						</view>
					</view>
					<view class="kouchu qtkc showOther">
							<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
								<view class="">
									<view class="noNumber">
										其他扣除（{{unit}}）
									</view>
								</view>
								<view class="">
									<input class="kouchu_input" v-model="otherdedection" type="number" placeholder="0.0" />
								</view>
							</view>
					</view>
				</view>
			</view>
		
			<view class="">
				选择以下抵扣项
			</view>
			<view class="addtionalDeduct display_flex">
				<view class="uni-flex uni-row">
					<view :class="{finish: wages.child}" style="-webkit-flex: 1;flex: 1;text-align: center" @click="handleRoute('child')">
						<image src="../../static/wages/head.png" style="width: 2rem; height: 2rem;" mode=""></image>
						<view class="">
							子女教育
						</view>
						<view class="note" v-if="!wages.child">
							子女满3周岁，正在接受学前教育或全日制学历教育
						</view>
						<view class="deductAmount" v-if="wages.child">
							￥<text>{{wages.child}}/月</text>
						</view>
					</view>
					<view :class="{finish: wages.education}" style="-webkit-flex: 1;flex: 1;text-align: center" @click="handleRoute('education')">
						<image src="../../static/wages/wind.png" style="width: 2rem; height: 2rem;" mode=""></image>
						<view class="">
							继续教育
						</view>
						<view class="note" v-if="!wages.education">
							纳税人本人在进行学历继续教育或职业资格继续教育
						</view>
						<view class="deductAmount" v-if="wages.education">
							￥<text>{{wages.education}}/月</text>
						</view>
					</view>
				</view>
				
				<view class="uni-flex uni-row">
					<view :class="{finish: wages.old}" style="-webkit-flex: 1;flex: 1;text-align: center" @click="handleRoute('old')">
						<image src="../../static/wages/old.png" style="width: 2rem; height: 2rem;" mode=""></image>
						<view class="">
							赡养老人
						</view>
						<view class="note" v-if="!wages.old">
							年满60岁的父母，及子女均已去世的年满60岁的祖父母、外祖父母
						</view>
						<view class="deductAmount" v-if="wages.old">
							￥<text>{{wages.old}}/月</text>
						</view>
					</view>
					<view :class="{finish: wages.loan}" style="-webkit-flex: 1;flex: 1;text-align: center" @click="handleRoute('loan')">
						<image src="../../static/wages/housemoney.png" style="width: 2rem; height: 2rem;" mode=""></image>
						<view class="">
							首套房贷
						</view>
						<view class="note" v-if="!wages.loan">
							本人或配偶首套住房且有贷款利息支出
						</view>
						<view class="deductAmount" v-if="wages.loan">
							￥<text>{{wages.loan}}/月</text>
						</view>
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view :class="{finish: wages.rent}" style="-webkit-flex: 1;flex: 1;text-align: center" @click="handleRoute('rent')">
						<image src="../../static/wages/house.png" style="width: 2rem; height: 2rem;" mode=""></image>
						<view class="">
							租房支出
						</view>
						<view class="note" v-if="!wages.rent">
							在主要工作城市没有自有住房，需要租房居住
						</view>
						<view class="deductAmount" v-if="wages.rent">
							￥<text>{{wages.rent}}/月</text>
						</view>
					</view>
					<view :class="{finish: wages.medication}" style="-webkit-flex: 1;flex: 1;text-align: center" @click="handleRoute('medication')">
						<image src="../../static/wages/heart.png" style="width: 2rem; height: 2rem;" mode=""></image>
						<view class="">
							大病医疗
						</view>
						<view class="note" v-if="!wages.medication">
							一个纳税年度内，医保报销后个人负担医药费用累计超过15000元
						</view>
						<view class="deductAmount" v-if="wages.medication">
							￥<text>{{wages.medication}}/月</text>
						</view>
					</view>
				</view>
			</view>
		
			
			<view class="submitbtn"  :class="{ active: active }" @click="handleSumbit">
				计算
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import { request } from '@/request/index'
	export default {
		data() {
			return {
				imageURL: '/static/wages/bg.png',
				isSwitch: false,
				active: false,
				salarycache: '',
				otherdedectioncache: '',
				gz: '',
				otherdedection: '',
				unit: '月'
			}
		},
		computed: {
			...mapState(['wages']),
			shebao() {
				return this.unit === '年' ? (12 * this.wages.shebao).toFixed(2) : this.wages.shebao
			},
			gongjijin() {
				return this.unit === '年' ? (12 * this.wages.gongjijin).toFixed(2) : this.wages.gongjijin
			}
		},
		onLoad(e) {
			this.gz = this.wages.gongzi.gz
			this.otherdedection = this.wages.gongzi.otherdedection
			this.unit = this.wages.gongzi.unit || '月'
			this.isSwitch = this.wages.gongzi.isSwitch
			this.active = this.wages.gongzi.active
		},
		methods: {
			...mapMutations(['setGongzi']),
			...mapMutations(['setShebao']),
			...mapMutations(['setGongjijin']),
			...mapMutations(['setWagesResult']),
			switchTime(e) {
				e==='m' ? this.isSwitch = false : this.isSwitch = true,
				
				this.salarycache ? (this.gz = this.salarycache,
				this.salarycache = 0) : (this.salarycache = this.gz,
				this.gz && (this.gz = "月" == this.unit ? (12 * this.gz).toFixed(2) : (this.gz / 12).toFixed(2))),
				this.otherdedectioncache ? (this.otherdedection = this.otherdedectioncache,
				this.otherdedectioncache = 0) : (this.otherdedectioncache = this.otherdedection,
				this.otherdedection && (this.otherdedection = "月" == this.unit ? (12 * this.otherdedection).toFixed(2) : (this.otherdedection / 12).toFixed(2))),
				this.unit = "月" == this.unit ? "年" : "月"
				
				this.setGongzi({gz: this.gz, isSwitch:this.isSwitch, active: this.active, unit: this.unit, otherdedection: this.otherdedection})
			},
			amountInput(e) {
				e.detail.value ? this.active = true : this.active = false,
				this.setGongzi({gz: e.detail.value, isSwitch:this.isSwitch, active: this.active, unit: this.unit, otherdedection: this.otherdedection})
			},
			handleRoute(e) {
				if(e === 'loan' && this.wages.rent) {
					uni.showToast({
						title: '不可和租房支出同时享受扣除政策',
						icon: 'none',
						duration: 1000
					});
					return
				}
				if(e === 'rent' && this.wages.loan) {
					uni.showToast({
						title: '不可和贷款同时享受扣除政策',
						icon: 'none',
						duration: 1000
					});
					return
				}
				
				const url = `/pages/wages/${e}`
				uni.navigateTo({
					url: url
				});
			},
			handleSumbit() {
				if(!this.active) return
				let setParams = {}
				setParams.bigMedical = this.wages.medication*1 || 0
				if(this.wages.childAll) {
					setParams.childDeductType = this.wages.childAll.cb*1 || 0
					if(this.wages.childAll.zv && this.wages.childAll.zv=='3') {
						setParams.childNum = this.wages.childAll.num*1 || 0
					}
					if(this.wages.childAll.zv && this.wages.childAll.zv!='3') {
						setParams.childNum = this.wages.childAll.zv
					}
				}else {
					setParams.childDeductType = 0
					setParams.childNum = 0
				}
				if(this.wages.loan && this.wages.loan=='1000') {
					setParams.firstHouseDeductType = 1
				}else if(this.wages.loan && this.wages.loan=='500') {
					setParams.firstHouseDeductType = 2
				}else {
					setParams.firstHouseDeductType = 0
				}
				if(this.wages.education && this.wages.education=='400') {
					setParams.keepEdu = 1
				}else if(this.wages.education && this.wages.education=='3600') {
					setParams.keepEdu = 2
				}else {
					setParams.keepEdu = 0
				}
				setParams.oldPersonMoney = this.wages.old*1 || 0
				if(this.wages.oldAll && this.wages.oldAll.od) {
					setParams.oldPersonType = this.wages.oldAll.od*1
				}else {
					setParams.oldPersonType = 0
				}
				
				if(this.isSwitch) {
					setParams.preTaxMonthSalary = Number((this.gz/12).toFixed(2))
					setParams.secutityDeductions = Number(((this.shebao*1 + this.gongjijin*1)/12).toFixed(2))
					setParams.otherDeduct = Number((this.otherdedection/12).toFixed(2))
				}else {
					setParams.preTaxMonthSalary = this.gz*1 || 0
					setParams.secutityDeductions = (this.shebao*1 + this.gongjijin*1) || 0
					setParams.otherDeduct = this.otherdedection*1 || 0
				}
				if(this.wages.rent && this.wages.rent=='1500') {
					setParams.rentingMoneyType = 1
				}else if(this.wages.rent && this.wages.rent=='1100') {
					setParams.rentingMoneyType = 2
				}else if(this.wages.rent && this.wages.rent=='800') {
					setParams.rentingMoneyType = 3
				}else {
					setParams.rentingMoneyType = 0
				}
				// setParams.secutityDeductions = (this.shebao*1 + this.gongjijin*1) || 0
				const params = {
					url: '/calculate-tax/taxCalculatorNormalSalary',
					method: 'POST',
					data: {
							  "bigMedical": setParams.bigMedical,
							  "childDeductType": setParams.childDeductType,
							  "childNum": setParams.childNum,
							  "firstHouseDeductType": setParams.firstHouseDeductType,
							  "keepEdu": setParams.keepEdu,
							  "oldPersonMoney": setParams.oldPersonMoney,
							  "oldPersonType": setParams.oldPersonType,
							  "otherDeduct": setParams.otherDeduct,
							  "preTaxMonthSalary": setParams.preTaxMonthSalary,
							  "rentingMoneyType":  setParams.rentingMoneyType,
							  "secutityDeductions": setParams.secutityDeductions
						}
				}
				request(params, true).then(res => {
					if(res.data.code === '0') {
						this.setWagesResult(res.data.data)
						uni.navigateTo({
							url: '/pages/wages/result'
						});
					}else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			handleHousingfund(to) {
				
				uni.navigateTo({
					url: `/pages/wages/housingfund?page=${to}`
				});
			}
			
		}
	}
</script>

<style>
	.home {
		padding: .95833rem;
		font-size: .673333rem;
		color: #010101;
	}
	.home .calculator .location {
		justify-content: flex-end;
		align-items: flex-end;
		font-size: .726667rem;
		color: #fff
	}
	.home .calculator .location .local-title {
		font-size: .90035rem;
	}
	.home .calculator .location .location_map {
		background: url('/static/wages/map.png') no-repeat;
		background-size: contain;
		height: 1.1003rem;
		width: 1.1003rem;
		top: 5px;
		position: relative;
	}

	.home .calculator .img{
		width: .533333rem;
		height: .533333rem
	}

	.home .calculator .title {
		font-size: 1.5373333rem;
		color: #000;
	}

	.home .calculator .content {
		background-color: #fff;
		box-shadow: 0 0 .58rem 0 hsla(0,0%,39.2%,.06);
		border-radius: .513333rem;
		margin-top: .94rem;
		margin-bottom: 1.1rem;
		padding: .406667rem .833333rem;
		position: relative;
		color: rgba(0,0,0,.6)
	}

	.home .calculator .content .switch {
		background: url('/static/wages/switch_m.png') no-repeat;
		background-size: contain;
		height: 2.013333rem;
		width: 4.746667rem;
		justify-content: space-between;
		color: #fff;
		align-items: center;
		position: absolute;
		top: -.806667rem;
		right: .833333rem;
		padding: 0 .64rem
	}
	.home .calculator .content .switch .switch_btn {
		font-size: .8666rem;
		padding: .3033rem .7333rem;
		display: inline-block;
	}
	.home .calculator .content .switch.unitYear .switch_btn {
		padding: .2033rem .5833rem;
	}

	.home .calculator .content .unitYear {
		background: url('/static/wages/switch_y.png') no-repeat;
		background-size: contain
	}

	.home .calculator .content .amount {
		padding: .966667rem .753333rem 0 .753333rem;
		font-weight: 700
	}

	.home .calculator .content .amount>.display_flex {
		margin-top: .673333rem;
		border-bottom: .026667rem solid #e7ecea;
		align-items: baseline
	}

	.home .calculator .content .amount>.display_flex span {
		font-size: .586667rem;
		font-weight: 400;
		color: #3b7de0
	}

	.home .calculator .content .amount .display_flex .amount_coin {
		font-size: 1.086667rem;
		font-weight: 400;
		color: #3b7de0;
		bottom: -1.033rem;
		position: relative;
	}
	 .home .calculator .content .amount .display_flex .amount_input {
		font-size: 2.066667rem;
		font-weight: bolder;
		color: #3b7de0;
		margin-left: .326667rem;
		min-width: 6.466667rem;
		height: 3.213333rem;
		line-height: 3.213333rem
	}

	.home .calculator .content .amount .display_flex .amount_input .uni-input-wrapper .uni-input-placeholder.input-placeholder {
		color: #3b7de0
	}
	.home .calculator .content .amount>.othertypes {
		display: flex;
		justify-content: space-between
	}

	.home .calculator .content .amount>.othertypes .OtherTypes {
		color: red
	}

	.home .calculator .content .kouchu {
		border-radius: .406667rem;
		border: .026667rem solid #e7ecea;
		padding: .35rem .7rem;
		margin-top: .726667rem;
		font-size: .62rem;
		font-weight: 700;
		position: relative
	}

	 .home .calculator .content .kouchu .kouchu_input {
		font-size: 1.7066667rem;
		font-weight: bolder;
		color: #3b7de0;
		margin-left: .326667rem;
		min-width: 6.466667rem;
		height: 1.7066667rem;
		line-height: 1.7066667rem
	}

	.home .calculator .content .kouchu .kouchu_input .uni-input-wrapper .uni-input-placeholder.input-placeholder {
		color: #3b7de0
	}
	.home .calculator .content .kouchu .noNumber {
		font-size: .733333rem;
		padding: .546667rem 0
	}

	.home .calculator .content .kouchu .display_flex {
		margin-top: .186667rem;
		align-items: baseline
	}

	.home .calculator .content .kouchu uni-text{
		color: #3b7de0;
		font-weight: 400
	}

	.home .calculator .content .kouchu uni-text.number {
		font-size: 1.2446667rem;
		margin-left: .266667rem;
		font-weight: bolder
	}

	.home .calculator .content .kouchu img.info {
		width: .426667rem;
		height: .426667rem
	}

	.home .calculator .content .qtkc {
		display: none;
		font-size: .373333rem;
		padding: .4rem .4rem;
		align-items: center
	}

	.home .calculator .content .qtkc input {
		color: #3b7de0;
		font-size: .586667rem;
		width: 4.133333rem;
		height: .8rem;
		line-height: .8rem
	}

	.home .calculator .content .showOther {
		display: flex
	}

	.home .calculator .content img.arrow {
		display: block;
		margin: auto;
		margin-top: .266667rem;
		height: .533333rem;
		width: .533333rem
	}

	.home .calculator .content img.arrowRotate {
		transform: rotate(180deg)
	}

	.home .calculator input::-webkit-input-placeholder {
		color: #3b7de0
	}

	.home .calculator input:-moz-placeholder,.home .calculator input::-moz-placeholder {
		color: #3b7de0
	}

	.home .calculator input:-ms-input-placeholder {
		color: #3b7de0
	}

	.home .addtionalDeduct {
		margin-top: .72rem;
		background-color: #fff;
		box-shadow: 0 0 .58rem 0 hsla(0,0%,39.2%,.06);
		border-radius: .513333rem;
		flex-wrap: wrap;
		font-weight: 700;
		overflow: hidden
	}

	.home .addtionalDeduct .uni-flex.uni-row>uni-view.finish {
		background-color: #7373ab;
		color: #fff
	}

	.home .addtionalDeduct .uni-flex.uni-row>uni-view {
		padding: .513333rem .74rem .62rem .74rem;
		border-bottom: .026667rem solid #e7ecea
	}

	/* .home .addtionalDeduct .uni-flex.uni-row>uni-view uni-image img {
		margin: auto;
		height: .64rem;
		width: .64rem;
		display: block
	}
 */
	.home .addtionalDeduct .uni-flex.uni-row>uni-view uni-view {
		text-align: center;
		/* margin-top: .46rem */
	}

	.home .addtionalDeduct .uni-flex.uni-row>uni-view .note {
		text-align: left;
		/* margin-top: .566667rem; */
		font-size: .593333rem;
		line-height: .8rem;
		color: #999;
		font-weight: 400
	}

	.home .addtionalDeduct .uni-flex.uni-row>uni-view .deductAmount {
		font-weight: 400;
	}

	.home .addtionalDeduct .uni-flex.uni-row>uni-view .deductAmount uni-text {
		font-size: 1.493333rem;
		font-weight: bolder
	}

	.home .addtionalDeduct .uni-flex.uni-row>uni-view:nth-child(odd) {
		border-right: .026667rem solid #e7ecea
	}

	.home .submitbtn {
		height: 2.28rem;
		width: 18.146667rem;
		line-height: 2.28rem;
		text-align: center;
		font-size: 0.856667rem;
		color: #fff;
		font-weight: 700;
		border-radius: .94rem;
		background-color: #ccc;
		margin: .7rem auto .333333rem;
	}

	.home uni-view.active {
		background-image: linear-gradient(-90deg,#a8a8da,#8c8cee),linear-gradient(#6b6bdb,#5858c5);
		background-blend-mode: normal,normal
	}

	.home .van-popup {
		border-radius: .106667rem;
		font-size: .373333rem;
		padding: .373333rem;
		line-height: .426667rem
	}

</style>
